import React, { Component } from 'react'
import './index.css';
export default class Item extends Component {
  state={
    moveFlag:false
  }
  handleMouse=(flag)=>{
      return ()=>{
        this.setState({moveFlag:flag})//把状态值重新赋值回去，形成闭环。
      }
  }
  //勾选值的传递，
  upDataCheck=(id)=>{
    return (event)=>{
      //拿到勾选的id值
        console.log(id,event.target.checked)
        this.props.handleCheck(id,event.target.checked);
    }
  }
  //删除一个的回调
  handleDelete=(id)=>{
      return ()=>{
        //判断用户是否要真的删除
        if(window.confirm('确定删除么？')){
          this.props.deletedTodo(id)
        } 
      }
  }
  render() {
    const {id,name,done}=this.props;
    const {moveFlag}=this.state;
    return (
      <div>
        <li style={{backgroundColor:moveFlag ?'#ddd':'#ffffff'}} onMouseLeave={this.handleMouse(false)} onMouseEnter={this.handleMouse(true)}>
              <label>
                <input type="checkbox" checked={done} onChange={this.upDataCheck(id)}/>
                <span>{name}</span>
              </label>
              <button onClick={this.handleDelete(id)} className="btn btn-danger" style={{ display:moveFlag ?'block':'none' }}>
                删除
              </button>
            </li>
      </div>
    )
  }
}
